<!--
 * @Description: 选课中心
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-11-27 10:08:41
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-17 11:52:41
-->
<template>
    <div class="containers-warp">
        <div class="images-title">
            <img src="/images/example/courseCenter.png" alt="" />
        </div>

        <div class="containers">
            <div class="nav">
                <div class="nav-title">
                    <div
                        class="item"
                        :class="index === navTitle_Active ? 'active' : ''"
                        v-for="(item, index) in navTitle"
                        :key="index"
                        @click="select_navTitle(index)"
                    >
                        <img :src="item.img" alt="" />
                    </div>
                </div>
                <div class="nav-body">
                    <div
                        class="item"
                        :class="index === active ? 'active' : ''"
                        v-for="(item, index) in navList"
                        :key="index"
                        @click="select_nav(index, item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div class="list">
                <el-row :gutter="gutter">
                    <el-col
                        :xs="12"
                        :sm="8"
                        :md="6"
                        :lg="6"
                        v-for="(item, index) in courseList"
                        :key="index"
                    >
                        <course-box :data="item"></course-box>
                    </el-col>
                </el-row>
                <el-pagination
                    :small="isSmall"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :pager-count="5"
                    :page-size.sync="pageSize"
                    @current-change="pageChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getNavList, geCourseList } from "~/api/course.js";
import clientWidth from '~/mixin/clientWidth'
export default {
    mixins: [clientWidth],
    data() {
        return {
            // 课程列表
            courseList: [],
            // 科目
            navList: [],
            active: 0,
            // 课程大类
            navTitle: [
                {
                    name: "线上课程",
                    img: "/images/cou_nav1.png",
                    type: 1,
                },
                {
                    name: "面授课程",
                    img: "/images/cou_nav2.png",
                    type: 2,
                },
            ],
            navTitle_Active: 0,
            // 分页
            page: 1,
            pageSize: 12,
            total: 0,
        };
    },
    computed: {
        // 1.线上 2.线下
        onlineType() {
            return this.navTitle[this.navTitle_Active].type;
        },
        // 选中科目id
        subjectId() {
            return this.navList[this.active].id;
        },
    },
    async asyncData({ app }) {
        // 获取科目导航
        let navList = await app.$axios
            .$get("/edu/course/classList")
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        // 总页数
        let total = 0;
        // 获取课程列表
        let courseList = await app.$axios
            .$get(`/edu/course/list`, {
                params: {
                    onlineType:1,
                    subjectId:navList[0].id,
                    page:1,
                    pageSize:12,
                },
            })
            .then((res) => {
                if (res.code === 0) {
                    total = res.data.total;
                    return res.data.list;
                }
            });
        return {
            navList,
            courseList,
            total
        };
    },
    methods: {
        // 选择科目
        select_nav(index, item) {
            this.active = index;
            this.page = 0;
            this._geCourseList();
        },
        // 线上线下切换
        select_navTitle(index) {
            this.navTitle_Active = index;
            this.active = 0;
            this.page = 0;
            this._geCourseList();
        },
        // 获取课程列表
        _geCourseList() {
            geCourseList(
                this.onlineType,
                this.subjectId,
                this.page,
                this.pageSize
            ).then((res) => {
                if (res.data.code === 0) {
                    this.courseList = res.data.data.list;
                    this.total = res.data.data.total
                }
            });
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._geCourseList();
        },
    },
};
</script>

<style lang="scss" scoped>
.images-title {
    width: 100%;
    height: 0;
    padding-bottom: 21%;
    overflow: hidden;
}

.list {
    margin-top: 20px;
    margin-bottom: 50px;
}
.nav {
    display: flex;
    background-color: #fff;
    margin-top: 20px;
    .nav-title {
        flex: 0 0 216px;
        .item {
            cursor: pointer;
            position: relative;
            img {
                width: 100%;
            }
            &.active::before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-right: 14px solid #fff;
                border-bottom: 10px solid transparent;
                position: absolute;
                top: 25px;
                right: 0;
            }
        }
    }
    .nav-body {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 10px 0 20px;
        .item {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            color: #999999;
            font-size: 14px;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin: 0 10px 20px 0;
            text-align: center;
            cursor: pointer;
            &:hover,
            &.active {
                color: #12bd96;
                border-color: #12bd96;
            }
        }
    }
}
@media screen and (max-width: 760px) {
    .images-title {
        width: 100%;
        height: 0;
        padding-bottom: 21%;
        overflow: hidden;
    }

    .list {
        margin-top: 2.632vw;
        margin-bottom: 6.579vw;
    }
    .nav {
        flex-direction: column;
    }
    .nav .nav-title {
        flex: 0;
        display: flex;
        .item {
            &.active::before {
                border-top: 0;
                border-left: 2.316vw solid transparent;
                border-right: 2.316vw solid transparent;
                border-bottom: 2.842vw solid #fff;
                top: auto;
                bottom: 0;
                right: 20vw;
            }
        }
    }
    .nav .nav-title .item {
        flex: 1;
    }
}
</style>
